<template>
	<el-tabs tab-position="left">
		<el-tab-pane label="用户管理">
			<el-button type="success" icon="Plus" @click="addUserHandler">添加</el-button>
			<el-table :data="data.records" stripe>
				<el-table-column prop="username" label="用户名"></el-table-column>
				<el-table-column prop="nickname" label="昵称"></el-table-column>
				<el-table-column prop="gender" label="性别">
					<template #default="item">
						<span v-if="item.row.gender === 0">-</span>
						<span v-else-if="item.row.gender===1">男</span>
						<span v-else>女</span>
					</template>
				</el-table-column>
				<el-table-column prop="mobile" label="手机号"></el-table-column>
				<el-table-column prop="email" label="邮箱"></el-table-column>
				<el-table-column prop="enabled" label="状态">
					<template #default="item">
						<el-tag v-if="item.row.enabled===1" type="success">启用</el-tag>
						<el-tag v-else type="danger">禁用</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="300px">
					<template #header>
						<el-input placeholder="搜索:用户名/昵称/手机号/邮箱" v-model="searchParam.keyWord">
							<template #append>
								<el-button @click="searchHandler">
									<el-icon><Search/></el-icon>
								</el-button>
							</template>
						</el-input>
					</template>
					<template #default="item">
						<el-button @click="editUserHandler(item.row)">
							<el-icon><Edit/></el-icon>
						</el-button>
						<el-popconfirm
						 :title="removeTip"
						 confirm-button-text="确定"
						 :confirm-button-type="item.row.enabled === 1 ?'danger' : 'success'"
						 cancel-button-text="取消"
						 :icon-color="item.row.enabled === 1 ?'#F56C6C' : '#67C23A'"
						 @confirm="removeConfirmHandler(item.row)"
						>
							<template #reference>
								<el-button 
								:type="item.row.enabled === 1 ?'danger' : 'success'" 
								@click="removeHandler(item.row)"
								>{{item.row.enabled === 1 ?'禁用' : '启用'}}</el-button>
							</template>
						</el-popconfirm>
						<el-button type="warning" @click="resetPasswdHandler(item.row)">重置密码</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination
				:current-page="searchParam.current"
				:page-size="searchParam.pageSize"
				:page-sizes="[10,20,50]"
				 :total="data.total"
				 layout="total, sizes, prev, pager, next, jumper"
				 @size-change="pageSizeChangeHandler"
				 @current-change="currentPageChangeHandler"
				></el-pagination>
			</div>
		</el-tab-pane>
		<!--新建/编辑用户-->
		<el-dialog 
		v-model="userDialog"
		:title="userDialogTitle"
		:show-close="false"
		:close-on-click-modal="false"
		:close-on-press-escape="false"
		width="400"
		>
			<el-form label-width="80px" :model="userForm" ref="userFormRef">
				<el-form-item label="用户名">
					<el-input v-model="userForm.username" :readonly="Boolean(userForm.id)" maxlength="16"></el-input>
				</el-form-item>
				<el-form-item label="密码" v-if="!userForm.id">
					<el-input v-model="userForm.password" type="password" maxlength="32" show-password></el-input>
				</el-form-item>
				<el-form-item label="昵称">
					<el-input v-model="userForm.nickname" maxlength="32"></el-input>
				</el-form-item>
				<el-form-item label="性别">
					<el-radio-group v-model="userForm.gender">
						<el-radio :label="0">默认</el-radio>
						<el-radio :label="1">男</el-radio>
						<el-radio :label="2">女</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="出生日期">
					<el-date-picker 
					v-model="userForm.birthday" 
					format="YYYY-MM-DD" 
					value-format="YYYY-MM-DD"
					:editable="false"
					type="date" 
					placeholder="请选择出生日期"
					></el-date-picker>
				</el-form-item>
				<el-form-item label="手机号">
					<el-input v-model="userForm.mobile" maxlength="16"></el-input>
				</el-form-item>
				<el-form-item label="邮箱">
					<el-input v-model="userForm.email" maxlength="32"></el-input>
				</el-form-item>
				<el-form-item label="是否启用" v-if="userForm.id">
					<el-switch 
					v-model="userForm.enabled" 
					inline-prompt 
					active-text="启用" 
					:active-value="1"
					inactive-text="禁用"
					:inactive-value="0"
					></el-switch>
				</el-form-item>
			</el-form>
			<div style="text-align: center;">
				<el-button @click="editUserCancelHandler">取消</el-button>
				<el-button type="primary" @click="editUserSaveHandler">保存</el-button>
			</div>
		</el-dialog>
		<el-dialog
		v-model="resetPwdDialog"
		title="重置密码"
		:show-close="false"
		:close-on-click-modal="false"
		:close-on-press-escape="false"
		width="400"
		>
			<el-form label-width="80px" :model="resetPwdForm" :rules="resetPasswdRules" ref="resetPwdFormRef">
				<el-form-item label="密码" prop="password">
					<el-input type="password" v-model="resetPwdForm.newPassword" maxlength="32" show-password></el-input>
				</el-form-item>
				<el-form-item label="确认密码" prop="confirmPassword">
					<el-input type="password" show-password v-model="resetPwdForm.confirmPassword" maxlength="32"></el-input>
				</el-form-item>
			</el-form>
			<div style="text-align: center;">
				<el-button @click="resetPasswdCancelHandler">取消</el-button>
				<el-button type="primary" @click="resetPasswdSaveHandler">保存</el-button>
			</div>
		</el-dialog>
	</el-tabs>
</template>

<script>
import {userList, save, modify, remove,resetPasswd} from '@/api/user'
import { ElMessage } from 'element-plus'
export default {
	name: 'Manage',
	data(){
		let that = this
		return{
			data: {
				title: 0,
				records: []
			},
			searchParam: {
				keyWord: '',
				current: 1,
				pageSize: 10
			},
			userDialog: false,
			userDialogTitle: '创建用户',
			userForm: {
				id: 0,
				username: '',
				password: '',
				nickname: '',
				gender: 0,
				mobile: '',
				email: '',
				enabled: 1
			},
			removeTip: '',
			resetPwdDialog: false,
			resetPwdForm: {
				userId: 0,
				newPassword: '',
				confirmPassword: ''
			},
			resetPasswdRules: {
				password: [
					{
						validator: function(rule,value,callback){
							if(value === ''){
								callback(new Error('密码不能为空!'))
							}else{
								callback()
							}
						},
						trigger: 'blur'
					}
				],
				confirmPassword: [
					{
						validator:function(rule,value,callback){
							if(value === ''){
								callback(new Error('密码不能为空!'))
							}else if(value !== that.resetPwdForm.newPassword){
								callback(new Error('两次密码不一致!'))
							}else{
								callback()
							}
						},
						trigger: 'blur'
					}
				]
			}
		}
	},
	methods: {
		pageSizeChangeHandler: function(pageSize){
			this.searchParam.pageSize = pageSize
			this.searchHandler()
		},
		currentPageChangeHandler: function(current){
			this.searchParam.current = current
			this.searchHandler()
		},
		searchHandler: function(){
			userList(this.searchParam)
			.then((res) => {
				console.log('userList:',res)
				this.data = res.data
			})
		},
		addUserHandler: function(){
			this.userDialog = true
			this.userForm = {}
		},
		saveUser: function(){
			if(this.userForm.id){
				return modify(this.userForm)
			}
			return save(this.userForm)
		},
		editUserHandler: function(user){
			this.userDialog = true
			this.userForm = user
		},
		editUserCancelHandler: function(){
			this.$refs.userFormRef.resetFields()
			this.userDialog = false
		},
		editUserSaveHandler: function(){
			let that = this
			// 保存用户信息
			this.saveUser()
			.then((res) => {
				ElMessage.success('操作成功')
				that.$refs.userFormRef.resetFields()
				that.userDialog = false
				that.searchHandler()
			})
		},
		removeHandler: function(user){
			this.removeTip = '是否'+user.enabled === 1 ? '禁用' : '启用'+'用户['+user.username+']'
		},
		removeConfirmHandler: function(user){
			modify({
				id: user.id,
				enabled: user.enabled === 1 ? 0 : 1
			}).then((res) => {
				ElMessage.success('操作成功')
				this.searchHandler()
			})
		},
		resetPasswdHandler: function(user){
			this.resetPwdForm.userId = user.id
			this.resetPwdDialog = true
		},
		resetPasswdCancelHandler: function(){
			this.resetPwdDialog = false
			this.$refs.resetPwdFormRef.resetFields()
		},
		resetPasswdSaveHandler: function(){
			let that = this
			// 重置密码
			this.$refs.resetPwdFormRef.validate((valid) => {
				if(valid){
					resetPasswd({...this.resetPwdForm})
					.then(res => {
						that.resetPwdDialog = false
						that.$refs.resetPwdFormRef.resetFields()
						ElMessage.success('重置成功')
					})
				}else{
					return false
				}
			})
			
		}
		
	},
	mounted() {
		this.searchHandler()
	}
}
</script>

<style scoped>
.pagination{
	padding: 10px;
	display: flex;
	justify-content: center;
	
}
</style>